import React, { useState, useEffect, memo } from 'react';
import ColorThief from 'colorthief';
import './GradientBackground.scss';

const GradientBackground = memo(
    ({
        bgGradient = ['#393993', '#131935'],
        circleSize = '200%',
        blendingMode = 'hard-light',
        blurAmount = `${40 - (Math.random() * 10).toFixed(1)}px`,
        imgurl,
        hasanimation = true,
    }) => {
        const [colors, setColors] = useState([
            [84, 84, 84],
            [67, 67, 67],
            [26, 26, 26],
            [12, 12, 12],
            [0, 0, 0],
        ]);

        useEffect(() => {
            if (imgurl) {
                // 使用ColorThief获取图片的主要颜色
                const img = new Image();
                img.crossOrigin = 'Anonymous'; // 如果图片来自不同域，需要设置这个属性
                img.src = imgurl;
                img.onload = () => {
                    const colorThief = new ColorThief();
                    const palette = colorThief.getPalette(img, 7);
                    setColors(palette);
                };
            }
        }, [imgurl]);

        // 确保颜色数组有5个颜色
        const normalizedColors = colors
            .concat([
                [84, 84, 84],
                [67, 67, 67],
                [26, 26, 26],
                [12, 12, 12],
                [0, 0, 0],
            ])
            .slice(0, 7);

        return (
            <div
                className="gradient-bg"
                style={{
                    '--color-bg1':
                        `rgb(${normalizedColors[5].join(',')})` ||
                        `${bgGradient[0]}`,
                    '--color-bg2':
                        `rgb(${normalizedColors[6].join(',')})` ||
                        `${bgGradient[1]}`,
                }}
            >
                {/* 动态注入CSS变量 */}
                {/* <style>{dynamicStyles}</style> */}

                <svg xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <filter id="goo">
                            <feGaussianBlur
                                in="SourceGraphic"
                                stdDeviation="10"
                                result="blur"
                            />
                            <feColorMatrix
                                in="blur"
                                mode="matrix"
                                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
                                result="goo"
                            />
                            <feBlend in="SourceGraphic" in2="goo" />
                        </filter>
                    </defs>
                </svg>

                <div
                    className={`gradients-container ${
                        hasanimation ? 'animation' : ''
                    }`}
                    style={{
                        '--color1': `${normalizedColors[0].join(',')}`,
                        '--color2': `${normalizedColors[1].join(',')}`,
                        '--color3': `${normalizedColors[2].join(',')}`,
                        '--color4': `${normalizedColors[3].join(',')}`,
                        '--color5': `${normalizedColors[4].join(',')}`,
                        '--circle-size': `${circleSize}`,
                        '--blending': `${blendingMode}`,
                        '--blur-amount': `${blurAmount}`,
                    }}
                >
                    <div
                        className="g1"
                        style={{
                            animationDelay: `${(Math.random() * 10).toFixed(
                                1
                            )}s`,
                        }}
                    ></div>
                    <div
                        className="g2"
                        style={{
                            animationDelay: `${(Math.random() * 10).toFixed(
                                1
                            )}s`,
                        }}
                    ></div>
                    <div
                        className="g3"
                        style={{
                            animationDelay: `${(Math.random() * 10).toFixed(
                                1
                            )}s`,
                        }}
                    ></div>
                    <div
                        className="g4"
                        style={{
                            animationDelay: `${(Math.random() * 10).toFixed(
                                1
                            )}s`,
                        }}
                    ></div>
                    <div
                        className="g5"
                        style={{
                            animationDelay: `${(Math.random() * 10).toFixed(
                                1
                            )}s`,
                        }}
                    ></div>
                </div>
            </div>
        );
    }
);

export default GradientBackground;
